Storybook SVG 컴포넌트 생성 및 렌더링
개요
- storybook에서 SVG 파일을 컴포넌트로 만드는 과정에서 오류 발생
- 발생한 오류는 총 2가지로, 이를 해결한 과정을 기록함
진행사항
오류 발생 1, import 오류
결론부터 먼저 이야기하자면 다음과 같음.
결론
- baseUrl을 통해 기본 경로를 지정해주면서 import 문을 storybook에서도 이해할 수 있었음.
- (아직은 추측) tsconfig에 나오는 paths에 ailas는 IDE 상에서 구문을 이해할 수 있도록 설정하는 것이지 이는 빌드 시에도 이해할 수 있는 것으로 판단하면 안됨. baseUrl에 명시를 하거나 또는 다른 방법을 통해 이해할 수 있도록 만들어야 함.
- 이는 오류를 해결하는 과정에서 문제를 해결하지 못했고, 여러가지 시도 끝에 해결된 내용이라 작동 원리에 대해서 계속해서 복기할 필요가 있음
트러블 슈팅
- story 파일을 생성한 뒤, storybook을 build하는 과정에서 Icon 컴포넌트가 import 되지않는 것을 확인.
- 하지만 실제 IDE에서는 정상적으로 import가 되고 있었기 때문에 compile 또는 build 과정에서 문제가 있을 수 있었음
- 빌드 시 나오는 로그를 다시 보면 preview에서 오류가 발생한 것으로 확인을 할 수 있었고 build가 중간에 중단되어 storybook-static 폴더 내부에 bundle 파일이 생성되지 않은 것을 확인하였음
- 하지만 sb-preview 파일은 정상적으로 생성된 것을 보면 preview 쪽에 문제가 발생하지 않은 것으로 판단
Storybook preview
- storybook document에서 말하는 preview는 컴포넌트를 렌더링하는 iframe인 캔버스 UI에 로드된다고 나와있는데, 이는 .storybook 폴더에 preview.ts를 의미하는 것이었음.
- storybook이 정상적으로 build 되면 위와 같은 폴더와 파일들이 생성되는데 여기서 iframe.bundle 파일이 위에서 말하는 캔버스 UI iframe이란 것을 유추해볼 수 있었음
- 다시 본론으로 돌아와 앞서 빌드 로그에서 확인했던 preview는 미리보기를 생성하는 과정에서 import가 되지 않았다는 것이고 이는 bundle 파일을 만드는 과정에서 import 문이 제대로 해석되지 않은 것으로 좁혀 생각해볼 수 있었음
- 이를 해결 할 수 있었던 방법으로 tsconfig에서 baseUrl을 수정하는 방법이 있었는데 아직 추측에 지나지 않아 지속적으로 복기하면서 확인해 필요가 있음
원리(?)
- storybook 모듈 내부에 위와 같은 함수가 있는데 baseUrl을 파라미터로 받고 있는 것을 확인할 수 있음
- 이는 어디서 받아오는 것인지 모르겠지만 아마(?) tsconfig에서 설정한 값을 통해 받아오고 이를 적용하여 complie 하는 것으로 판단됨
- 다음 예제는 ts에서 js로 컴파일하는 과정을 확인해본 내용임
- baseUrl(또는 paths)를 적용해 import를 하였고 IDE 상에서도 구문을 이해할 수 있었음
- tsc를 통해 컴파일한 결과 common js 형태에서도 동일하게 불러오는 모습을 확인할 수 있었음
- 하지만 nodemon을 통해 실행한 결과 모듈을 찾을 수 없음을 확인할 수 있었는데 결국 baseUrl과 paths 둘 중 어느 하나 명시했다고 하더라고 이는 IDE에서 이해할 수 있을 뿐이지 node의 인터프리터가 해석할 수 있는 것이 아니다.
- 이를 위해 alias나 baseUrl을 인터프리터도 이해할 수 있게 별도의 작업이 필요할 것이다.